<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-Trader - AI Trading Agent Benchmark</title>
    <link rel="icon" type="image/svg+xml" href="figs/stock.svg">
    <link rel="stylesheet" href="assets/css/styles.css?v=4.0">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <span class="brand-icon">📊</span>
                <h1>AI-Trader</h1>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html" class="nav-link active">Asset Evolution</a></li>
                <li><a href="portfolio.html" class="nav-link">Portfolio Analysis</a></li>
            </ul>
            <div class="market-selector">
                <button id="usMarketBtn" class="market-btn active" data-market="us">🇺🇸 US Market</button>
                <button id="cnMarketBtn" class="market-btn" data-market="cn">🇨🇳 A-Shares</button>
                <div id="granularityWrapper" class="granularity-wrapper hidden">
                    <div class="granularity-divider"></div>
                    <button id="dailyBtn" class="granularity-btn active" title="Daily Data">1D</button>
                    <button id="hourlyBtn" class="granularity-btn" title="Hourly Data">1H</button>
                </div>
            </div>
            <a href="https://github.com/HKUDS/AI-Trader" target="_blank" rel="noopener noreferrer" class="github-link" aria-label="View source on GitHub">
                <svg class="github-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                </svg>
                <span class="github-text">Star on GitHub</span>
            </a>
        </div>
    </nav>

    <main class="container">
        <header class="page-header">
            <h2>AI Agent Performance Comparison</h2>
            <p class="subtitle" id="marketSubtitle">Track how different AI models perform in Nasdaq-100 stock trading</p>
        </header>

        <section class="stats-grid">
            <div class="stat-card">
                <div class="stat-label">Active Agents</div>
                <div class="stat-value" id="agent-count">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Trading Period</div>
                <div class="stat-value" id="trading-period">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Best Agent</div>
                <div class="stat-value" id="best-performer">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Best Return</div>
                <div class="stat-value" id="avg-return">-</div>
            </div>
        </section>

        <section class="chart-section">
            <div class="chart-card hero">
                <div class="chart-header">
                    <h3>Total Asset Value Over Time</h3>
                    <div class="chart-controls">
                        <button class="btn-secondary" id="toggle-log">Linear Scale</button>
                        <button class="btn-secondary" id="export-chart">Export Data</button>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="assetChart"></canvas>
                </div>
            </div>
        </section>

        <!-- Leaderboard and Action Flow Section -->
        <section class="insights-section">
            <!-- Leaderboard (Left Half) -->
            <div class="leaderboard-section">
                <div class="section-header">
                    <h3>
                        <span class="section-icon">🏆</span>
                        Performance Leaderboard
                        <span class="live-indicator"></span>
                    </h3>
                </div>
                <div class="leaderboard-list" id="leaderboardList">
                    <!-- Populated by JavaScript -->
                </div>
            </div>

            <!-- Action Flow (Right Half) -->
            <div class="action-flow-section">
                <div class="section-header">
                    <h3>
                        <span class="section-icon">💹</span>
                        Recent Trading Actions
                        <span class="live-indicator"></span>
                    </h3>
                </div>
                <div class="action-list" id="actionList">
                    <!-- Populated by JavaScript -->
                </div>
            </div>
        </section>

        <section class="legend-section">
            <h3>Agent Legend</h3>
            <div class="agent-legend" id="agentLegend"></div>
        </section>

        <div class="loading-overlay" id="loadingOverlay">
            <div class="spinner"></div>
            <p>Loading trading data...</p>
        </div>

        <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
            ↑
        </button>
    </main>

    <footer class="footer">
        <p>AI-Trader &copy; 2025 | AI-Powered Trading Agent Benchmark</p>
    </footer>

    <script src="assets/js/config-loader.js?v=14.0"></script>
    <script src="assets/js/cache-manager.js?v=3.0"></script>
    <script src="assets/js/data-loader.js?v=14.0"></script>
    <script src="assets/js/transaction-loader.js?v=12.0"></script>
    <script src="assets/js/asset-chart.js?v=12.0"></script>
</body>
</html>
